<template>
    <div class="interact_box" >
        <div >
            <div v-if="info.collected" class="center_to_center">
                <span @click.stop="deal_start_message">
                        <Button type="success">过往</Button>
                </span>
                <span>
                        <Button type="error" @click.stop="deal_quit_del_room">绝情</Button>
                </span>
            </div> 
            <div v-else>
                 <Button type="primary" @click="deal_add_f_g">申请</Button>
            </div>
        </div>  
        <div  class="center_to_center"> 
            <div v-if="!info.collected" class="center_to_center" >
                <span>

                </span>
            </div>
            <div v-else>

            </div>
            <div>
               <span>
                    <Button type="info" @click.stop="deal_konwe_more" >窥探</Button>
               </span>
            </div>
        </div>
    </div>
    <CONFIRM :isVisible="show_confirm" @isconfim="deal_true_quit_del_room"
         @iscancel="deal_false_quit_del_room" :confirmText="'不在怀念'"
        :cancelText="'留下'" :message="'你确定要放下吗?'" />
</template>
<script setup>
import CONFIRM from "@/components/common/confirm.vue"
import { defineProps, onMounted, ref, inject,defineModel, nextTick } from 'vue';
import {add_frined,add_group} from "@/api/chat/room.js"
import { success, warning } from '@/static/js/alert';
const show_confirm=ref(false)
const chat = inject('chat')()
const show_card = defineModel('show_info_card', {required:true})
const interract_info = defineModel('current_interact_info', { required: true })
const room_stream=inject('room_stream')
// collected用于判断是否是用户的好友或群组
const props = defineProps({
    info: {
        type: Object,
        required:true
    }
})
const deal_start_message =async  () => { 
    let data;
    if (props.info.type == 'group') { 
            data = chat.value.get_group_info_by_room_id(props.info.id)
    }else{ 
             data = chat.value.get_friend_info_by_user_id(props.info.data.id)
    }
    chat.value.set_current_chat({
            room_id: data?.room_info?.room_id,
            type: data.room_info.type,
            // 如果不是好友就存储群聊信息里的,群头像
            otherinfo: {
                head_image: data?.friend_info?.head_image || data?.room_info?.head_image,
            }
    })
    chat.value.add_current_chat_list(data?.room_info?.room_id,data)
}

const deal_konwe_more = async () => {
    try {   
        interract_info.value = props.info
        show_card.value = false
        await nextTick()
            show_card.value = true
            if (props.info.type == 'group') {
              
                interract_info.value=props.info
            } else {
          
                interract_info.value=props.info
            }}
    catch { 
        show_card.value=false
    }
    console.log(interract_info.value)
}
const deal_add_f_g = async () => { 
    if (props.info.type == 'group') {
        const judge=await add_group(chat.value.get_user_info()?.id, props.info.data.room_id)
        if (judge == 200) {
            success('申请成功!')
        } else { 
            warning('已申请/出错')
        }
    } else {
        const judge = await add_frined(chat.value.get_user_info()?.id, props.info.id)
        if (judge == 200) {
            success('申请成功!')
        } else { 
            warning('已申请/出错')
        }
    }
}

const deal_quit_del_room = async () => { 
    show_confirm.value=true
}
const deal_true_quit_del_room = async () => { 
    show_confirm.value = false
    
}
const deal_false_quit_del_room = async () => {
    show_confirm.value = false
}

onMounted(() => { 
    // console.log(props.info)
})
</script>

<style  scoped>
.interact_box {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: auto;
    height: 100%;
    
    /* 玻璃效果核心代码 */
    background: rgba(255, 255, 255, 0.2); /* 半透明白色基底 */
    backdrop-filter: blur(10px); /* 关键：毛玻璃模糊效果 */
    -webkit-backdrop-filter: blur(10px); /* 兼容 Safari */
    border-radius: 8px; /* 圆角增强玻璃质感 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 轻微阴影提升层次 */
    border: 1px solid rgba(255, 255, 255, 0.3); /* 透明边框增强边缘光感 */
}


.center_to_center{
    display: flex;
    justify-content: center;
    gap:5px;
    align-items: center;
}
</style>